<template>
  <Container class="mobile-form-modal task_fill">
    <div class="mobile-form-modal-inner">
      <div class="title" v-if="type == 'follow'">
        {{ $t("form.task_fill.follow_title") }}
      </div>
      <div class="title" v-if="type == 'replay'">
        {{ $t("form.task_fill.replay_title") }}
      </div>
      <div class="title" v-if="type == '' || type == 'publish'">
        {{ $t("form.task_fill.publish_title") }}
      </div>
      <div class="panel-title">
        1.
        {{
          taskDetailData ? taskDetailData.title : $t("form.task_fill.sub_title")
        }}
      </div>
      <a-form class="form" :model="taskPublishForm" ref="publishFormRef">
        <template v-if="type == 'follow'">
          <a-form-item
            class="form-item editor"
            :class="[taskPublishForm.content ? 'vertical' : '']"
            :label="$t('form.task_fill.follow_form.item_2.label')"
            name="content"
            :rules="[
              {
                required: true,
                message: $t('form.task_fill.form.item_2.rules.error_1'),
                trigger: 'blur',
              },
            ]"
          >
            <div class="flex-1" @click="editorVisible = true">
              <div class="raw-html">
                <div class="ql-editor" v-html="taskPublishForm.content"></div>
              </div>
              <span class="editor-text"
                >{{ $t("editor.task_follow") }}
                <IconArrowRight fill="rgba(0, 0, 0, 0.25)" />
              </span>
            </div>
          </a-form-item>
        </template>
        <template v-else-if="type == 'replay'">
          <a-form-item
            class="form-item editor"
            :class="[taskPublishForm.content ? 'vertical' : '']"
            :label="$t('form.task_fill.replay_form.item_1.label')"
            name="content"
            :rules="[
              {
                required: true,
                message: $t('form.task_fill.form.item_2.rules.error_1'),
                trigger: 'blur',
              },
            ]"
          >
            <div class="flex-1" @click="editorVisible = true">
              <div class="raw-html">
                <div class="ql-editor" v-html="taskPublishForm.content"></div>
              </div>
              <span class="editor-text"
                >{{ $t("editor.task_replay") }}
                <IconArrowRight fill="rgba(0, 0, 0, 0.25)" />
              </span>
            </div>
          </a-form-item>
        </template>
        <tepmlate v-else>
          <a-form-item
            class="form-item"
            :label="$t('form.task_fill.form.item_1.label')"
            name="title"
            :rules="[
              {
                required: true,
                message: $t('form.task_fill.form.item_1.rules.error_1'),
                trigger: 'blur',
              },
            ]"
          >
            <a-input
            
              :maxlength="30"
              v-model:value.trim="taskPublishForm.title"
              :placeholder="$t('form.task_fill.form.item_1.rules.error_1')"
            ></a-input>
          </a-form-item>
          <a-form-item
            :label="$t('form.task_fill.form.item_category.label')"
            name="category_id"
            :rules="[
              {
                required: true,
                message: $t('form.task_fill.form.item_category.rules.error_1'),
                trigger: 'blur',
              },
            ]"
            class="form-item"
          >
            <a-select v-model:value="taskPublishForm.category_id">
              <a-select-option
                v-for="item in globalStore.taskCategoryList"
                :value="item.id"
                :key="item.id"
                >{{ item.title }}</a-select-option
              >
            </a-select>
          </a-form-item>
          <a-form-item
            class="form-item editor"
            :class="[taskPublishForm.content ? 'vertical' : '']"
            :label="$t('form.task_fill.form.item_2.label')"
            name="content"
            :rules="[
              {
                required: true,
                message: $t('form.task_fill.form.item_2.rules.error_1'),
                trigger: 'blur',
              },
            ]"
          >
            <div class="flex-1" @click="editorVisible = true">
              <div class="raw-html">
                <div class="ql-editor" v-html="taskPublishForm.content"></div>
              </div>
              <span class="editor-text"
                >{{ $t("editor.task_requirements") }}
                <IconArrowRight fill="rgba(0, 0, 0, 0.25)" />
              </span>
            </div>
          </a-form-item>
        </tepmlate>
      </a-form>
      <div class="footer-btn">
        <div class="footer-btn-inner">
          <a-button @click="goBack">{{ $t("btnText.cancel") }}</a-button>
          <a-button
            class="ensure-btn"
            :class="isValidPublish ? '' : 'disabled'"
            type="primary"
            @click="continuePublish"
          >
            <template v-if="type == 'follow' || type == 'replay'">
              {{ $t("btnText.continue_commit") }}
            </template>
            <template v-else>
              {{ $t("btnText.continue_publish") }}
            </template>
          </a-button>
        </div>
      </div>
    </div>
  </Container>
  <EditorMobile
    v-model="taskPublishForm.content"
    :placeholder="
      type == 'replay'
        ? $t('editor.task_replay')
        : type == 'follow'
        ? $t('editor.task_follow')
        : $t('editor.task_requirements')
    "
    v-model:visible="editorVisible"
  />
</template>

<script setup lang="ts">
import { computed, getCurrentInstance, h, onMounted, ref } from "vue";
import type { TaskCreateParams } from "../../types/task";
import { postUploadSingleImg } from "../../api/api";
import { postCreateTask, postTaskFollowUp } from "../../api/task";
import { message, Modal } from "ant-design-vue";
import { useRoute, useRouter } from "vue-router";
import { RegLink } from "../../data/reg";
import { useGlobalStore } from "../../store";
const editorVisible = ref(false);

const globalStore = useGlobalStore();

const router = useRouter();
const route = useRoute();

const $t = getCurrentInstance()?.appContext.config.globalProperties.$t;
const type = route.query.type || "";

const isValidPublish = computed(() => {
  let flag = true;
  if (type != "replay" && type != "follow") {
    if (!taskPublishForm.value.title) flag = false;
  }
  if (!taskPublishForm.value.content) flag = false;
  return flag;
});

// 发布
let taskDetailData = ref();
const taskPublishForm = ref<TaskCreateParams>({
  title: "",
  content: "",
  multi_pic: "",
  file_url: "",
  link_url: "",
  category_id: "",
});

const publishFormRef = ref();
const submiting = ref(false);
const continuePublish = () => {
  if (!isValidPublish.value) return;
  publishFormRef.value.validate().then(() => {
    let okText = $t("btnText.continue_publish");
    if (type != "publish") {
      okText = $t("btnText.ensure_commit");
    }
    let modalTitle = $t("dialog.profile_task.confirm_publish");
    if (type != "publish") {
      modalTitle = $t("btnText.ensure_commit");
    }
    let modalContent = $t("dialog.profile_task.confirm_desc");
    if (type == "replay") {
      modalContent = $t("dialog.profile_task.replay_confirm_desc");
    }
    if (type == "follow") {
      modalContent = $t("dialog.profile_task.follow_confirm_desc");
    }
    let confirmModal = Modal.confirm({
      title: modalTitle,
      content: modalContent,
      icon: () => h("", ""),
      async onOk() {
        submiting.value = true;
        confirmModal.update({
          okButtonProps: {
            loading: submiting.value,
          },
        });
        let res: any;
        if (type == "follow" || type == "replay") {
          taskPublishForm.value.task_id = taskDetailData.value.id;
          const { category_id, ...parmas } = taskPublishForm.value;
          res = await postTaskFollowUp(parmas);
        } else {
          res = await postCreateTask(taskPublishForm.value);
        }
        if (res.code === 200) {
          submiting.value = false;
          let __msg = $t("message.success.task.create");
          if (type == "follow") __msg = $t("message.success.task.follow");
          if (type == "replay") __msg = $t("message.success.task.replay");
          message.success(__msg);
        } else {
          let __msg = $t("message.error.task.create");
          if (type == "follow") __msg = $t("message.error.task.follow");
          if (type == "replay") __msg = $t("message.error.task.replay");
          message.error(__msg);
          submiting.value = false;
        }
        goBack();
        confirmModal.update({
          okButtonProps: {
            loading: submiting.value,
          },
        });
      },
      onCancel() {
      },
      class: "profile-confirm-modal",
      okText,
      cancelText: $t("btnText.back_edit"),
      width: "19.7917vw",
      maskClosable: true,
      centered: true,
    });
  });
};
const goBack = () => {
  router.go(-1);
  if (route.query.from != "/mobile/followUp") {
    sessionStorage.removeItem("taskDetailData");
  }
};

onMounted(() => {
  let data = sessionStorage.getItem("taskDetailData");
  if (data) {
    taskDetailData.value = JSON.parse(data);
  }
});
</script>
<style lang="less">
.task_fill {
  .wrap-container > .wrap-pl {
    padding-bottom: 0 !important;
  }
}
@media screen and (max-width: 768px) {
  .profile-confirm-modal {
    .ant-modal-content {
      border-radius: 82px !important;
      padding: 123px !important;
    }
    .ant-modal-confirm-title {
      font-size: 92px !important;
      font-weight: 500;
    }
    .ant-modal-confirm-content {
      font-size: 72px !important;
      color: #36434d !important;
    }
    .ant-form-item-label {
      white-space: nowrap !important;
    }
    .ant-modal-confirm-btns {
      .ant-btn {
        height: 205px !important;
        flex: 1;
        border-radius: 51px 51px 51px 51px !important;
        font-size: 72px !important;
        &:last-child {
          margin-left: 61px !important;
        }
      }
    }
  }
}
</style>
<style scoped lang="less">
@import url("./common.less");
.ant-input {
  padding: 0 !important;
}
.ant-input-affix-wrapper {
  border: none;
  box-shadow: none !important;
}
:deep(.ant-form) {
  .ant-select-selector,
  .ant-input-number {
    border-color: transparent !important;
    box-shadow: 0 0 0 transparent !important;
    text-align: right;
    input {
      text-align: right;
    }
  }
}
</style>
